<template>
  <!-- 资料完善页 -->
  <div class="information" :active="active">
    <div>
      <span>*旅行社店名：</span>
      <input
        type="text"
        maxlength="12"
        placeholder="请输入最长12位的店名"
        v-model="formationdata.travel_agency_name"
        @change="duplication_name"
      />
    </div>
    <div>
      <span>店招：</span>
      <div class="upload-box">
        <!-- 图片 -->
        <img
          v-show="img.imgInfo"
          :name="img.imgInfo"
          :src="img.imgInfo"
          :url="img.imgurl"
          class="avatar"
          alt=""
        />
        <input type="file" @change="upload" accept="image/*" />
        <label v-show="!img.imgInfo" class="avatar-uploader-icon">
          <div>
            <i class="icon-camera"></i>
            <span>5MB以下</span>
          </div>
        </label>
      </div>
    </div>
    <!-- 旅行社地址 -->

    <div>
      <span>*旅行社地址：</span>
      <div class="lxs-selectt-box">
        <el-select
          v-model="provincevalue"
          @change="change(provincevalue)"
          placeholder="省"
        >
          <el-option
            v-for="item in province1"
            :key="item.cri_code"
            :label="item.cri_name"
            :value="item.cri_name + '|' + item.cri_code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="cityvalue"
          @change="change(cityvalue)"
          placeholder="市"
          no-data-text="请选择省"
        >
          <el-option
            v-for="item in city1"
            :key="item.cri_code"
            :label="item.cri_name"
            :value="item.cri_name + '|' + item.cri_code"
          >
          </el-option>
        </el-select>
        <el-select
          no-data-text="请选择市"
          v-model="formationdata.area"
          placeholder="区/县"
        >
          <el-option
            v-for="item in areas"
            :key="item.cri_code"
            :label="item.cri_name"
            :value="item.cri_name"
          >
          </el-option>
        </el-select>
      </div>
      <textarea
        class="formation"
        v-model="formationdata.address"
        placeholder="旅社详细地址"
      ></textarea>
    </div>
    <div>
      <span>旅行社简介：</span>
      <textarea v-model="formationdata.travel_agency_intro"></textarea>
    </div>

    <div class="select-box">
      <span>运营中心选择：</span>
      <div>
        <el-select
          v-model="cityCode"
          @change="getcode(cityCode)"
          placeholder="省"
        >
          <el-option
            v-for="item in province1"
            :key="item.cri_code"
            :label="item.cri_name"
            :value="item.cri_code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="areaCode"
          @change="getservice(areaCode)"
          placeholder="市"
          :disabled="provincevalue ? false : true"
        >
          <el-option
            v-for="item in city1"
            :key="item.cri_code"
            :label="item.cri_name"
            :value="item.cri_code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="formationdata.center_id"
          :disabled="cityvalue ? false : true"
          placeholder="选择运营中心"
          no-data-text="该市运营中心还未开通"
        >
          <el-option
            v-for="item in centre"
            :key="item.id"
            :label="item.center_name"
            :value="item.center_id"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="submit" @click="submitBtn">提交</div>
  </div>
</template>

<script>
import { beforeAvatarUpload, provinceChange } from "@/utils/method.js";
import gettravel from "@/mixins/gettravel.js";
export default {
  mixins: [gettravel],
  data() {
    return {
      province1: [], // 省级内容器
      city1: [], // 市级内容器
      areas: [], // 区级容器
      centre: [], // 运营内容器
      provincevalue: "",
      cityvalue: "",
      cityCode: "", // 运营中心
      areaCode: "",
      formationdata: {
        travel_agency_name: "", //旅行社店名
        travel_agency_pic: "", // 店招
        province: "", // 省
        city: "", // 市
        area: "", // 区
        address: "", //旅行社地址
        travel_agency_intro: "", // 旅行社简介
        center_id: "", //	服务中心id
      },
      img: {
        // 图片上传的标识和内容
        imgInfo: "",
        imgurl: "",
      },
    };
  },
  props: ["active"],
  beforeCreate() {
    provinceChange("000000").then((res) => {
      this.province1 = res.data.data;
    });
  },
  methods: {
    upload(file) {
      beforeAvatarUpload(file).then((res) => {
        this.img.imgInfo = URL.createObjectURL(file.target.files[0]);
        this.formationdata.travel_agency_pic = res[0];
      });
    },
    // 提交资料
    submitBtn() {
      this.getTravielInfor(1);
    },
    // 省级获取市级内容
    change(e) {
      if (e == this.provincevalue) {
        let code = this.provincevalue.split("|");
        this.formationdata.province = code[0];
        provinceChange(code[1]).then((res) => {
          console.log(res, code[1]);
          this.city1 = res.data.data;
        });
      } else if (e == this.cityvalue) {
        let code = this.cityvalue.split("|");
        this.formationdata.city = code[0];
        provinceChange(code[1]).then((res) => {
          console.log(res, code[1]);
          this.areas = res.data.data;
        });
      }
    },
  },
};
</script>

<style lang='less'>
.information {
  font-size: 14px;
  position: absolute;
  margin-top: 3.6vh;
  width: 50.4vw;
  padding-top: 4vh;
  padding-bottom: 2vh;

  top: 32%;
  left: 50%;
  transform: translate(-50%, -28%);
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 15px;

  & > div {
    margin: 0 auto;
    width: 16vw;
    margin-bottom: 1.5vh;
    position: relative;

    // 图片上传
    .upload-box {
      position: relative;
      border: 1px solid #07c160;
      height: 5.6vw;
      width: 6vw;
      border-radius: 4px;
      overflow: hidden;

      .avatar {
        position: relative;
        width: 6vw;
        height: 5.6vw;
        border: none;
        z-index: 2;
      }

      input {
        outline: none;
        position: absolute;
        cursor: pointer;
        top: -34%;
        left: 0;
        z-index: 4;
        width: 100%;
        height: 16vh;
        border: none;
      }

      .avatar-uploader-icon {
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 5.9vw;
        z-index: 2;
        height: 5.9vw;
        background: #ffffff;
        box-sizing: border-box;
        opacity: 1;
        border-radius: 2px 2px 0px 0px;
        text-align: center;
      }
    }

    // 下面除特定input
    & > textarea.formation {
      margin-top: 1.5vh;
    }
    & > textarea::placeholder {
      color: #ccc;
    }
    & > textarea {
      line-height: 1;
      outline: none;
      height: 8vh;
      padding: 0 0.4vw;
      width: 16vw;
      line-height: 3vh;
      resize: none;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    & > input {
      height: 4vh;
      width: 100%;
    }

    & > span {
      position: absolute;
      width: 8vw;
      line-height: 4vh;
      text-align: right;
      left: -8.4vw;
      top: 0%;
    }
  }
  & > div:last-child {
    cursor: pointer;
    width: 17vw;
    position: relative;
    left: 0.5vw;
    background-color: #07c160;
    color: #ffffff;
    border-radius: 4px;
    line-height: 4vh;
    text-align: center;
    height: 4vh;
  }
  .select-box {
    height: 15vh;
    div {
      .el-input {
        input {
          width: 17vw;
          height: 4vh !important;
        }
        margin-bottom: 1.5vh;
      }
      .el-input__suffix {
        right: 0px;
        top: 6px;
      }
    }
  }
}

// 旅行社select
.lxs-selectt-box {
  display: flex;
  .el-select {
    input {
      height: 4vh;
      width: 5.55vw;
    }
    .el-input__suffix {
      right: 0px;
      top: 6px;
    }
    margin-right: 0.2vw;
  }
}
</style>